
  .b{
    width: 320px;
    position: sticky;
    top:16px;
    height: 600px;
  .top{
    width: 100%;
    // color:@a;
    background-color: var(--bgc);
   
    h3{
      width: 100%;
      height: 50px;
      border-bottom: solid 1px var(--lc);
      line-height: 50px;
      font-weight: bold;
      padding:0 20px;
      color: var(--fc);
    }
    ul{
      // padding:0 20px;
      max-height: 60px;
      transition: 3s;
      li{
      transition: 0.35s;
      font-size: 14px;
      padding-bottom: 12px;
      opacity: 0;
      a{
        color: var(--fc);
      }
     
      span{
        margin: 0 2px;
      }
      :last-child{
        color: #888;
      }
    }
   
    .active{
      padding-left:20px;
      opacity: 1;
    }
    li:hover{
     span{
       color: red;
     }
    }} 
    .active{
      max-height:500px;
     
    }
    
  }
  .bottom{
    width: 100%;
    background-color: var(--bgc);
   
    // transition: 2s;
    h3{
      width: 100%;
      height: 50px;
      border-bottom: solid 1px var(--lc);
      line-height: 50px;
      font-weight: bold;
      padding:0 20px;
      color: var(--fc);
    }
    ul{
      // padding: 0 20px;
      transition: 3s;
      max-height: 60px;
      
      // animation: active 2s;
      li{
        font-size: 14px;
        padding-bottom: 12px;
        display: flex;
        opacity: 0;
        transition: 0.35s;
        color: var(--fc);
        justify-content: space-between;
        :last-child{
          color: #888;
          margin-right: 20px;
        }
      }
      .active{
        padding-left:16px;
        opacity: 1;
      }
      li:hover{
        span{color: red;}
        
      }
    }
    .active{
      max-height:500px;
    }
  
  }
}